import React from 'react'

export default function Demo() {
    //  可以绑定 input 的组件 
    const myref=React.useRef()
    // 数组的结构赋值 
    const [count,setCount] =React.useState(0)
    
    function add(){
        // 第一种写法
        // setCount(count+1)
        // 第二种写法
        setCount((count) => (count+1))
    }

    function show(){
        alert(myref.current.value)
    }


    React.useEffect(() => {
        let timer=setInterval(() => {
            setCount(count=>count+1)
        }, 1000);
        return () => {
            // 这个函数 相当于卸载组件的时候  回调的函数  
            clearInterval(timer)
        }
    },[])
    // React.useEffect 添加第二个参数的时候, [] 空数组的话, 相当于 生命周期挂载的 
    // 1. 不加数组的话, 是所有的状态改变的时候, 都会进行回调  
    
  return (
    <div>
        <input type="text"  ref={myref} />
        <h2>当前求和为:{count}</h2>

        {/*  函数式组件没有this, 所以this 去掉 */}
        <button onClick={add}>点击+1</button>
        <button onClick={show}>点我提示数据</button>

    </div>
  )
}
